import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:mi_mang_flutter/provider/theme_provider.dart';
import 'package:mi_mang_flutter/utils/locale_util.dart';
import 'package:provider/provider.dart';

class ThemePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var model = Provider.of<ThemeProvider>(context);
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(i18n(context).theme),
        centerTitle: true,
      ),
      body: Container(
        alignment: Alignment.topCenter,
        child: ListView(
          children: <Widget>[
            ...List.generate(
              Colors.primaries.length,
              (index) {
                return Stack(
                  children: <Widget>[
                    AbsorbPointer(
                      absorbing: false,
                      child: InkWell(
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                        onTap: () {
                          model.switchTheme(color: Colors.primaries[index]);
                        },
                        child: Container(
                          height: (size.width - 140) / 4,
                          margin: EdgeInsets.fromLTRB(20, 10, 20, 10),
                          alignment: Alignment.center,
                          child: Text(
                            "颜色值名称",
                            style: TextStyle(color: Colors.white),
                          ),
                          decoration: BoxDecoration(
                            color: Colors.primaries[index],
                            shape: BoxShape.rectangle,
                            border: Colors.primaries[index] == model.themeColor
                                ? Border.all(color: Colors.grey, width: 3)
                                : null,
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                          ),
                        ),
                      ),
                    ),
                    // Positioned(
                    //   top: 0,
                    //   right: 0,
                    //   child: IconButton(
                    //     icon: Icon(
                    //       Icons.cancel,
                    //       color: Colors.redAccent,
                    //     ),
                    //     onPressed: () {},
                    //   ),
                    // )
                  ],
                );
              },
            ),
            InkWell(
              onTap: () {
                _showColorPicker(context);
              },
              child: Container(
                height: (size.width - 140) / 4,
                margin: EdgeInsets.fromLTRB(20, 10, 20, 10),
                // alignment: Alignment.center,
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                  size: 40,
                ),
                decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  gradient: LinearGradient(
                    colors: [
                      Colors.redAccent,
                      Colors.yellowAccent,
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _showColorPicker(BuildContext context) {
    MaterialColor themeColor = Theme.of(context).primaryColor as MaterialColor;
    showDialog(
        context: context,
        builder: (ctx) {
          return AlertDialog(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(20.0),
              ),
            ),
            elevation: 0.0,
            title: Text("颜色选择"),
            content: SingleChildScrollView(
              child: MaterialPicker(
                pickerColor: themeColor,
                onColorChanged: (color) {
                  themeColor = MaterialColor(
                      color.a.toInt() << 24 |
                          color.r.toInt() << 16 |
                          color.g.toInt() << 8 |
                          color.b.toInt(),
                      <int, Color>{
                        50: color,
                        100: color,
                        200: color,
                        300: color,
                        400: color,
                        500: color,
                        600: color,
                        700: color,
                        800: color,
                        900: color,
                      });
                },
                enableLabel: true,
              ),
            ),
            actions: <Widget>[
              TextButton(
                child: Text(
                  i18n(context).cancel,
                  style: TextStyle(color: Colors.redAccent),
                ),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              TextButton(
                child: Text(i18n(context).ok),
                onPressed: () async {
                  Provider.of<ThemeProvider>(context, listen: false)
                      .switchTheme(color: themeColor);
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        });
  }
}
